import React, { useEffect, useLayoutEffect, useState } from 'react';
import gsap from 'gsap';

function GSAPTest(){
    const [tl, setTl] = useState();
    const [bool, setBool] = useState(false);
    useEffect(()=>{
        let tl = gsap.timeline({ defaults:{ duration:4 }, repeat:0, repeatDelay:2 });
        console.log(tl);
        tl.add('tag', '+=1');
        tl.to('.red', { x:600 });
        tl.to('.green', { x:600 }, 'tag+=2');
        tl.to('.blue', { x:600 }, 'tag');
        setTl(tl);
    },[])
    return (
        <div>
            <button onClick={()=>{
                tl.reversed(!bool);
            }}>reversed</button>
            <button onClick={()=>tl.pause()}>pause</button>
            <button onClick={()=>tl.play()}>play</button>
            <button style={{ marginRight:'1rem' }} onClick={()=>tl.resume()}>resume</button>
            {/* 直接将动画帧调整到时间线的指定时间点的状态 */}
            <button onClick={()=>tl.seek(6)}>插入seek</button>
            
            {/* 直接切换变换过程的百分比进度的状态 */}
            <button onClick={()=>tl.progress(0.4)}>插入progress</button>

            <button onClick={()=>tl.timeScale(0.5)}>减速0.5</button>
            <div className='red' style={{ width:'50px', height:'50px', background:'red', marginBottom:'1rem' }}></div>
            <div className='green' style={{ width:'50px', height:'50px', background:'green', marginBottom:'1rem' }}></div>
            <div className='blue' style={{ width:'50px', height:'50px', background:'blue', marginBottom:'1rem' }}></div>
            

            

        </div>
    )
}

export default GSAPTest;